<template>
  <div class="content">
    <ListSearch @change="store.changelistsearch()" />
    <el-scrollbar height="100%">
      <div class="filter_body" style="position: relative">
        <el-collapse class="filter_collapse" v-model="state.activeNames" @change="handleChange">
          <template v-if="state.activefilterType.name == 'all'">
            <template v-for="item in state.filterOptions.condition" :key="item.name">
              <CollapseItem v-for="item2 in item.option_list" :key="item2.value" :data="item2" />
            </template>
          </template>
          <template v-else>
            <CollapseItem v-for="item2 in store.getcondition()" :key="item2.value" :data="item2" />
          </template>
        </el-collapse>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import ListSearch from './components/ListSearch.vue'
import CollapseItem from './components/CollapseItem.vue'

const listsearch = ref({
  value1: 'all',
  value2: '0',
})

const { store, state } = inject('Filter')

const handleChange = () => {
  // console.log(state.activeNames)
}
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.filter_body {
  // display: flex;
  // justify-content: end;
  padding-right: 8px;
}
</style>

<style>
.filter_collapse {
  margin-left: 30px;
  border: none;
}

.filter_collapse .el-collapse-item__header.is-active {
  border-bottom: 1px solid#ebebeb !important;
}
.filter_collapse .el-collapse-item__wrap {
  border: none;
}
.filter_collapse .el-collapse-item__content {
  padding-bottom: 0;
}
</style>